<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/css/main.css" type="text/css">
    <title>ECharts</title>
</head>
<body>
<div id="container">
    <div id="main"></div>
</div>
</body>
</html>
<script src="/js/echarts.min.js"></script>
<script src="/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    let myChart = echarts.init(document.getElementById('main'));
    let let value = {
    rain: [8, 18, 8, 12, 0, 19, 21, 19, 24.8, 23, 29.7],
    tmp: [12, 13, 9.7, 8, -6, 15, 25, 15, 23, 14, 23],
    winds: [3, 2.8, 5, 6.8, 6.4, 8, 7, 8.4, 7, 8, 10],
    pre: [600, 400, 550, 580, 400, 500, 700, 500, 600, 700, 650]
    }

    let colors = ['#4BC946', '#FDA975', '#27D3E2', '#FF0014'];
    let splitNumber = 5; // 分割段数

    //计算最大值
    function calMax(arr) {
    let min = Math.min.apply(null, arr);
    let max = Math.max.apply(null, arr);
    let interval = (max - min) / splitNumber; // 平均值
    max = Math.ceil(max + interval); // 向上取整
    // console.log(min, max, interval);
    return max;
    }

    //计算最小值
    function calMin(arr) {
    let min = Math.min.apply(null, arr);
    let max = Math.max.apply(null, arr);
    let interval = (max - min) / splitNumber; // 平均值
    min = min === 0 ? min : Math.floor(min - interval); // 向下取整
    // console.log(min, max, interval);
    return min;
    }

    option = {
    color: colors,
    backgroundColor: '#fff',
    title: {
    text: '2020年2月4日某站雷暴天气时序图',
    subtext: '灾害时间：2020/2/4 08:30-20202/4 10:20',
    top: '1%',
    x: 'center',
    textStyle: { color: '#2D527C', fontSize: '20', fontWeight: 'bold'},
    subtextStyle: { color: '#2D527C', fontSize: '14', fontWeight: 'bold' }
    },
    grid: {
    top: '15%',
    bottom: '10%',
    left: '15%',
    right: '15%',
    },
    legend: {
    top: '9%'
    },
    tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' }
    },
    xAxis: {
    type: 'category',
    axisTick: { show: false },
    axisLabel: {
    textStyle: { color: '#333333', fontSize: 14 }
    },
    axisLine: {
    show: false,
    lineStyle: { color: '#707070' }
    },
    value: ['02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
    },
    yAxis: [{
    // name: '降水(mm)',
    type: 'value',
    position: 'left',
    min: calMin(value.rain),
    max: calMax(value.rain),
    splitNumber: splitNumber,
    interval: (calMax(value.rain) - calMin(value.rain)) / splitNumber,
    splitLine: {
    lineStyle: { type: 'dashed', color: '#707070' }
    },
    axisLabel: {
    // formatter: '{value}mm',
    formatter: function(value, index) {
    return (value + '').indexOf('.') != -1 ? value.toFixed(1) + 'mm' : value + 'mm';
    },
    textStyle: { color: colors[0], fontSize: 14 }
    },
    axisLine: { show: false },
    axisTick: { show: false }
    }, {
    // name: '气温(°C)',
    type: 'value',
    position: 'left',
    offset: 65,
    min: calMin(value.tmp),
    max: calMax(value.tmp),
    splitNumber: splitNumber,
    interval: (calMax(value.tmp) - calMin(value.tmp)) / splitNumber,
    splitLine: { show: false },
    axisLine: { show: false },
    axisLabel: {
    // formatter: '{value}°C',
    formatter: function(value, index) {
    return parseInt(value) + '°C';
    },
    textStyle: { color: colors[1], fontSize: 14 }
    },
    axisTick: { show: false }
    }, {
    // name: '风速(m/s)',
    type: 'value',
    position: 'right',
    min: calMin(value.winds),
    max: calMax(value.winds),
    splitNumber: splitNumber,
    interval: (calMax(value.winds) - calMin(value.winds)) / splitNumber,
    splitLine: { show: false },
    axisLine: { show: false },
    axisLabel: {
    // formatter: '{value}m/s',
    formatter: function(value, index) {
    return parseInt(value) + 'm/s';
    },
    textStyle: { color: colors[3], fontSize: 14 }
    },
    axisTick: { show: false }
    }, {
    // name: '气压(hPa)',
    type: 'value',
    position: 'right',
    offset: 54,
    min: calMin(value.pre),
    max: calMax(value.pre),
    splitNumber: splitNumber,
    interval: (calMax(value.pre) - calMin(value.pre)) / splitNumber,
    splitLine: { show: false },
    axisLine: { show: false },
    axisLabel: {
    // formatter: '{value}hPa',
    formatter: function(value, index) {
    return parseInt(value) + 'hPa';
    },
    textStyle: { color: colors[2], fontSize: 14 }
    },
    axisTick: { show: false }
    }],
    series: [{
    name: '降水',
    type: 'bar',
    barWidth: '40%',
    value: value.rain
    },
    {
    name: '温度',
    type: 'line',
    symbol: 'circle',
    symbolSize: 8,
    yAxisIndex: 1,
    value: value.tmp
    },
    {
    name: '气压',
    type: 'line',
    symbol: 'circle',
    symbolSize: 8,
    yAxisIndex: 3,
    value: value.pre
    },
    {
    name: '风速',
    type: 'line',
    symbol: 'circle',
    symbolSize: 8,
    yAxisIndex: 2,
    value: value.winds
    }
    ]
    };


    myChart.setOption(option);
    myChart.showLoading();
    $.ajax({
    type : "post",
    async : true,
    url : "/api/option",
    value : {},
    dataType : "json",
    success : function(result) {
    if (vip.meeet.tool.code == 200) {
    myChart.hideLoading();
    option.xAxis[0].value = result.value.xAxis.value;
    option.yAxis[0].name = result.value.yAxis.name;
    option.series[0].value = result.value.series[0].value;
    option.series[0].name = result.value.series[0].name;

    option.series[1].value = result.value.series[1].value;
    option.series[1].name = result.value.series[1].name;
    myChart.setOption(option);
    }
    },
    error : function(errorMsg) {
    alert("图表请求数据失败!");
    myChart.hideLoading();
    }
    });
</script>
